import { useState, useRef } from 'react';
import './MessageInput.css';

const MessageInput = ({ onSend, disabled = false }) => {
  const [input, setInput] = useState('');
  const textareaRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (input.trim() && !disabled) {
      onSend(input.trim());
      setInput('');
      // 重置textarea高度
      if (textareaRef.current) {
        textareaRef.current.style.height = 'auto';
      }
    }
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit(e);
    }
  };

  const handleInputChange = (e) => {
    setInput(e.target.value);
    
    // 自动调整textarea高度
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 120) + 'px';
    }
  };

  const quickActions = [
    { label: '📊 生成图表', query: '请生成一个数据图表' },
    { label: '🔍 数据查询', query: '查询相关数据' },
    { label: '💡 智能分析', query: '进行数据分析' }
  ];

  const handleQuickAction = (query) => {
    if (!disabled) {
      onSend(query);
    }
  };

  return (
    <div className="message-input-container">
      <form onSubmit={handleSubmit} className="input-form">
        <div className="input-wrapper">
          <textarea
            ref={textareaRef}
            value={input}
            onChange={handleInputChange}
            onKeyDown={handleKeyDown}
            placeholder="💬 输入您的问题，例如：查询枫桥镇村干部任务完成情况..."
            className="message-input"
            disabled={disabled}
            rows={1}
          />
          <button
            type="submit"
            className={`send-button ${disabled ? 'disabled' : ''}`}
            disabled={disabled || !input.trim()}
          >
            <span className="send-icon">📤</span>
          </button>
        </div>
      </form>
      
      <div className="quick-actions">
        {quickActions.map((action, index) => (
          <button
            key={index}
            className="quick-action-button"
            onClick={() => handleQuickAction(action.query)}
            disabled={disabled}
            title={action.query}
          >
            {action.label}
          </button>
        ))}
      </div>
    </div>
  );
};

export default MessageInput;
